<style>
    .his-wrapper {
        background-color: #fff;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
    }

    .el-form-item {
        margin-bottom: 0 !important;
    }

    .his-wrapper ._label {
        line-height: 32px;
        color: #333;
        display: inline-block;
    }

    .his-wrapper ._label:nth-of-type(3),
    .his-wrapper ._label:nth-of-type(2) {
        margin-left: 20px;
    }

    .his-wrapper ._table {
        padding-top: 20px;
    }

    .his-wrapper .footer {
        text-align: right;
        box-sizing: border-box;
        padding-top: 20px;
    }

    .his-wrapper .dialog-wrapper {
        width: 100%;
        height: 350px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .his-wrapper .dialog-wrapper ._row {
        width: 100%;
        margin-bottom: 10px;
    }

    .his-wrapper .dialog-wrapper ._row span {
        width: 49%;
        line-height: 30px;
        font-weight: bold;
        vertical-align: top;
        display: inline-block;
    }

    .his-wrapper .dialog-wrapper ._row i {
        font-size: 14px;
        color: #999;
        font-weight: normal;
    }

    .his-wrapper .dialog-wrapper ._row p {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
    }
</style>

<body>
    <div class="his-wrapper" id="wrapper">
        <span class="_label">类型：</span>
        <el-radio-group v-model="status" style="padding-top: 3px;">
            <el-radio :label="0">在院</el-radio>
            <el-radio :label="1">出院</el-radio>
        </el-radio-group>
        <span class="_label">起始时间：</span>
        <el-date-picker v-model="startDay" type="date" size="small" @change="handleChangeStartDate"
            :picker-options="options.start" placeholder="选择日期">
        </el-date-picker>
        <span class="_label">结束时间：</span>
        <el-date-picker v-model="endDay" type="date" size="small" @change="handleChangeEndDate"
            :picker-options="options.end" placeholder="选择日期">
        </el-date-picker>
        <el-button size="small" type="primary" @click="getTableData" style="margin-left: 20px">His查询</el-button>
        <!-- <div style="padding-top: 20px;">
            <span class="_label">患者姓名：</span>
            <el-input size="small" v-model="name" style="width: 200px" placeholder="请输入患者姓名" />
            <span class="_label">手机号：</span>
            <el-input size="small" v-model="phone" style="width: 200px" placeholder="请输入手机号" />
            <el-button size="small" type="primary" @click="handleSearchPat" style="margin-left: 20px">搜索</el-button>
            <el-button size="small" type="warning" @click="handleClear" style="margin-left: 20px">清除</el-button>
        </div> -->
        <div class="_table">
            <el-table :data="table.allData" border v-loading="table.loading">
                <el-table-column label="序号" align="center" prop="No" width="80">
                    <template slot-scope="scope">
                        {{scope.$index+(table.current-1)*table.size+1}}
                    </template>
                </el-table-column>

                <el-table-column label="患者姓名" align="center" prop="pAT_NAME">
                </el-table-column>
                <el-table-column label="联系电话" align="center" prop="pHONE_NO">
                </el-table-column>
                <el-table-column label="身份证号码" align="center" prop="iD_NUMBER">
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleAddQueue(scope.row)">添加到系统</el-button>
                        <el-button size="mini" type="primary" @click="handleChecked(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-pagination background @current-change="handleChangePage" layout="prev, pager, next"
                    :total="table.total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="HIS 系统用户详细信息" :visible.sync="dialog.show" width="60%">
            <div class="dialog-wrapper">
                <div class="_row">
                    <span>身份证号码：<i>{{ dialog.info.iD_NUMBER }}</i></span>
                    <span>患者姓名：<i>{{ dialog.info.pAT_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>出生身长：<i>{{ dialog.info.bIRTH_HEIGHT }}</i></span>
                    <span>出生体重：<i>{{ dialog.info.bIRTH_WEIGHT }}</i></span>
                </div>
                <div class="_row">
                    <span>出生头围：<i>{{ dialog.info.bIRTH_HEAD }}</i></span>
                    <span>出生日期：<i>{{ dialog.info.dATE_BIRTH }}</i></span>
                </div>
                <div class="_row">
                    <span>性别：<i>{{ dialog.info.pHYSI_SEX_NAME }}</i></span>
                    <span>民族：<i>{{ dialog.info.eTHNIC_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>婚姻状况：<i>{{ dialog.info.mARITAL_STATUS_NAME }}</i></span>
                    <span>证件类型：<i>{{ dialog.info.cERTIFICATE_TYPE }}</i></span>
                </div>
                <div class="_row">
                    <span>证件号码：<i>{{ dialog.info.cERTIFICATE_NO }}</i></span>
                    <span>国籍名称：<i>{{ dialog.info.nATION_NAME }}</i></span>
                </div>

                <div class="_row">
                    <span>职业类别名称：<i>{{ dialog.info.oCCUPATION_CATEG_NAME }}</i></span>
                    <span>学历名称：<i>{{ dialog.info.eDUCATION_NAME }}</i></span>

                </div>
                <div class="_row">
                    <span>出生地址：<i>{{ dialog.info.bIRTH_ADDR }}</i></span>
                    <span>户口地址：<i>{{ dialog.info.hUKOU_ADDR }}</i></span>
                </div>
                <div class="_row">
                    <span>籍贯地址：<i>{{ dialog.info.nATIVE_ADDR }}</i></span>
                    <span>电子邮件：<i>{{ dialog.info.eMAIL }}</i></span>
                </div>
                <div class="_row">
                    <span>工作单位：<i>{{ dialog.info.cOMPANY }}</i></span>
                    <span>工作单位地址：<i>{{ dialog.info.aDDR_COMPANY }}</i></span>
                </div>
                <div class="_row">
                    <span>工作单位电话：<i>{{ dialog.info.cOMPANY_PHONE_NO }}</i></span>
                    <span>联系电话：<i>{{ dialog.info.pHONE_NO }}</i></span>
                </div>
                <div class="_row">
                    <span>联系地址：<i>{{ dialog.info.cONTACT_ADDR }}</i></span>
                    <span>住址电话：<i>{{ dialog.info.pHONE_NO_HOME }}</i></span>
                </div>
                <div class="_row">
                    <span>现住地址：<i>{{ dialog.info.cURR_ADDR }}</i></span>
                    <span>联系电话：<i>{{ dialog.info.pHONE_NO }}</i></span>
                </div>
                <div class="_row">
                    <span>联系人关系名称：<i>{{ dialog.info.cONTACT_RELATION_NAME }}</i></span>
                    <span>联系人证件类型：<i>{{ dialog.info.cOMPANY_CERTIFICATE_TYPE }}</i></span>
                </div>
                <div class="_row">
                    <span>联系人证件号码：<i>{{ dialog.info.cOMPANY_CERTIFICATE_NO }}</i></span>
                    <span>联系人姓名：<i>{{ dialog.info.cONTACT_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>联系人地址：<i>{{ dialog.info.cONTACT_PERSON_ADDR }}</i></span>
                    <span>联系人电话：<i>{{ dialog.info.cONTACT_PHONE_NO }}</i></span>
                </div>
                <div class="_row">
                    <span>病案号：<i>{{ dialog.info.mR_NO }}</i></span>
                    <span>病历号：<i>{{ dialog.info.aNAMNESIS_NO }}</i></span>
                </div>
                <div class="_row">
                    <span>就诊卡号：<i>{{ dialog.info.vISIT_CARD_NO }}</i></span>
                    <span>住院次数：<i>{{ dialog.info.iNHOSP_NUM }}</i></span>
                </div>
                <div class="_row">
                    <span>住院流水号：<i>{{ dialog.info.iNHOSP_NO }}</i></span>
                    <span>医疗保险卡号：<i>{{ dialog.info.mEDICARE_CARD_NO }}</i></span>
                </div>
                <div class="_row">
                    <span>医疗保险类别名称：<i>{{ dialog.info.mEDICARE_CATEG_NAME }}</i></span>
                    <span>患者类型名称：<i>{{ dialog.info.pAT_TYPE_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>护理级别名称：<i>{{ dialog.info.nURSING_LEVEL_NAME }}</i></span>
                    <span>患者状态：<i>{{ dialog.info.pAT_STATUS_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>初步诊断：<i>{{ dialog.info.pRELIMINARY_DIAG_NAME }}</i></span>
                    <span>入院诊断：<i>{{ dialog.info.aDMIT_DIAG_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>出院诊断：<i>{{ dialog.info.dISCHARGE_DIAG_NAME }}</i></span>
                    <span>入院日期：<i>{{ dialog.info.aDMIT_DATE }}</i></span>
                </div>
                <div class="_row">
                    <span>入院情况：<i>{{ dialog.info.aDMIT_SITUATION }}</i></span>
                    <span>入院途径：<i>{{ dialog.info.aDMIT_WAY_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>患者主诉：<i>{{ dialog.info.pAT_CHIEF_DESCR }}</i></span>
                    <span>简要病情：<i>{{ dialog.info.bRIEF_DISEASE_SITUATION }}</i></span>
                </div>
                <div class="_row">
                    <span>诊疗计划：<i>{{ dialog.info.tREAT_PLAN }}</i></span>
                    <span>入院医疗机构：<i>{{ dialog.info.aDMIT_MI_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>入院科室：<i>{{ dialog.info.aDMIT_DEPT_NAME }}</i></span>
                    <span>入院病区：<i>{{ dialog.info.aDMIT_WARD_NAME }}</i></span>
                </div>

                <div class="_row">
                    <span>入院病房：<i>{{ dialog.info.aDMIT_SICKROOM_NAME }}</i></span>
                    <span>入院病床：<i>{{ dialog.info.aDMIT_BED_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>当前医疗机构：<i>{{ dialog.info.cURR_MI_NAME }}</i></span>
                    <span>当前科室：<i>{{ dialog.info.cURR_DEPT_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>当前病区：<i>{{ dialog.info.cURR_WARD_NAME }}</i></span>
                    <span>当前病房：<i>{{ dialog.info.cURR_SICKROOM_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>当前病床：<i>{{ dialog.info.cURR_BED_NAME }}</i></span>
                    <span>出院医疗机构：<i>{{ dialog.info.dISCHARGE_MI_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>出院科室：<i>{{ dialog.info.dISCHARGE_DEPT_NAME }}</i></span>
                    <span>出院病区：<i>{{ dialog.info.dISCHARGE_WARD_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>出院病房：<i>{{ dialog.info.dISCHARGE_SICKROOM_NAME }}</i></span>
                    <span>出院病床：<i>{{ dialog.info.dISCHARGE_BED_NAME }}</i></span>
                </div>
                <div class="_row">
                    <span>出院日期：<i>{{ dialog.info.dISCHARGE_DAT }}</i></span>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="handleCanelDialog">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="请选择要加入的队列" :visible.sync="dialogJoin.show" width="30%">
            <div class="dialog-wrapper" style="height: auto !important;max-height: 400px;">
                <el-radio-group v-model="dialogJoin.queue">
                    <el-radio style="width: 100%; margin-bottom: 20px;" :label="item.id"
                        v-for="(item, index) in queueList" :key="index">{{ item.queueName }}</el-radio>
                </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCanelDialogJoin">取 消</el-button>
                <el-button type="primary" size="small" @click="handleSureDialogJoin">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</body>
<script>
    require(['bbcare'], function ($bb) {
        var URL = $bb.baseUrl("followup")

        var vm = new Vue({
            el: '#wrapper',
            data: function () {
                return {
                    startDay: '',
                    endDay: '',
                    start: '',
                    end: '',

                    status: 0,
                    options: {
                        start: {
                            disabledDate: function (time) {
                                var currentDate = new Date().getTime()
                                return time.getTime() > currentDate
                            }
                        },
                        end: {
                            disabledDate: function (time) {
                                var currentDate = new Date().getTime()
                                return time.getTime() > currentDate
                            }
                        }
                    },
                    table: {
                        data: [],
                        allData: [],
                        current: 1,
                        size: 10,
                        total: 0,
                        loading: false
                    },


                    name: '',
                    phone: '',
                    dialog: {
                        show: false,
                        info: {},
                        EMR: {}
                    },
                    dialogJoin: {
                        show: false,
                        queue: '',
                        info: {},
                        EMR: {}
                    },
                    queueList: []
                }
            },
            created: function () {
                this.endDay = this.getFormatDate(new Date())
                var oneDay = 3600 * 24 * 1000
                this.startDay = this.getFormatDate(new Date().getTime() - oneDay * 7)
                this.start = this.clone(this.startDay)
                this.end = this.clone(this.endDay)
                this.getTableData()
                this.getQueueList()
            },
            methods: {
                /**
                 * 选择开始时间
                 * @param { Date } val
                 */
                handleChangeStartDate: function (val) {
                    var s = this.getDateTime(val)
                    var e = this.getDateTime(this.endDay)
                    if (s > e) {
                        this.startDay = this.clone(this.start)
                        return this.$message.error('起始日期不能大于终止日期')
                    }
                    this.start = this.getFormatDate(this.startDay)

                },
                /**
                 * 选择结束时间
                 * @param { Date } val
                 */
                handleChangeEndDate: function (val) {
                    var s = this.getDateTime(this.startDay)
                    var e = this.getDateTime(val)
                    if (s > e) {
                        this.endDay = this.clone(this.end)
                        return this.$message.error('起始日期不能大于终止日期')
                    }
                    this.end = this.getFormatDate(this.endDay)

                },
                /**
                 *  获取格式化时间
                 *  @param { string | number | Date } date
                 */
                getFormatDate: function (date) {
                    var time = ''
                    if (Object.prototype.toString.call(date) !== '[object Date]') time = new Date(date)
                    else time = date
                    var year = time.getFullYear(),
                        month = time.getMonth() + 1,
                        day = time.getDate()
                    function addZore (num) {
                        return num < 10 ? '0' + num : num
                    }
                    return year + '-' + addZore(month) + '-' + addZore(day) + " 00:00:00"
                },
                /**
                 * 获取对象得 时间戳
                 * @param { string | number | Date } date
                 */
                getDateTime: function (date) {
                    if (Object.prototype.toString.call(date) == '[object Date]') return date.getTime()
                    if (typeof date == 'number') return date
                    return new Date(date).getTime()
                },

                getParams () {
                    let param = {
                        pageNum: this.table.current,
                        pageSize: this.table.size
                    }
                    if (this.status == 0 || this.status == 1) {
                        param.type = this.status
                    }
                    if (this.start) {
                        param.start_time = this.start
                    }
                    if (this.end) {
                        param.end_time = this.end
                    }
                    return param
                },

                /**
                 * 获取表格数据
                 */
                getTableData: function () {
                    var that = this
                    that.table.loading = true
                    $bb.ajax({
                        url: URL + 'followup/service/jiangmenHisInfo/getPatientList',
                        data: JSON.stringify(this.getParams()),
                        success: function (res) {
                            // console.log('res', res)
                            //if (res.code == 2000) {
                            //   that.$message.error(res.msg)
                            // that.table.loading = false
                            // return
                            //}
                            that.table.loading = false
                            that.table.allData = res.list
                            that.table.total = res.total

                        }
                    })
                },

                /**
                 * 改变页面大小
                 * @param { number } page 当前选中的页码
                 */
                handleChangePage: function (page) {
                    this.table.current = page
                    this.getTableData()
                },


                /**
                 * 清除选择
                 */
                handleClear: function () {
                    this.name = ''
                    this.phone = ''
                    this.getPageData()
                },
                /**
                 * 查看
                 * @param {*} row
                 */
                handleChecked: function (row) {
                    this.dialog.show = true
                    this.dialog.info = row
                },
                /**
                 * 取消查看
                 */
                handleCanelDialog: function () {
                    this.dialog.show = false
                },
                /**
                 * 取消查看加入的队列
                 */
                handleCanelDialogJoin: function () {
                    this.dialogJoin.show = false
                    this.dialogJoin.queue = ''
                },
                /**
                 * 添加到系统种
                 * @param {*} row
                 */
                handleAddQueue: function (row) {

                    this.dialogJoin.show = true
                    this.dialogJoin.info = row

                },
                /**
               * 克隆一个对象
               * @param { * } obj
               */
                clone: function (obj) {
                    return JSON.parse(JSON.stringify(obj))
                },
                /**
                 * 获取队列列表
                 */
                getQueueList: function () {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/service/queue/followQueueListQuery',
                        data: JSON.stringify({
                            data: {
                                showFlag: "1"
                            }
                        }),
                        success: function (res) {
                            that.queueList = res.data.rows
                        }
                    })
                },
                /**
                 * 加入到队列中
                 */
                handleSureDialogJoin: function () {
                    if (this.dialogJoin.queue == '') return this.$message.error('请选择要加入的队列')
                    this.dialogJoin.info.queueid = this.dialogJoin.queue
                    this.dialogJoin.show = false
                    this.dialogJoin.info.EMR = this.dialogJoin.EMR
                    this.dialogJoin.info.isHis = true
                    $bb.openPage('addPatient', this.dialogJoin.info)
                }
            }
        })
    })
</script>
